<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>供应链系统测试</h1>
    <div id="status">正在测试...</div>
    <div id="kpi-grid"></div>
    
    <script>
        console.log('测试页面加载完成');
        
        // 测试axios是否可用
        if (typeof axios !== 'undefined') {
            console.log('Axios已加载');
        } else {
            console.error('Axios未加载');
        }
        
        // 测试API连接
        async function testAPI() {
            try {
                console.log('开始测试API连接...');
                const response = await axios.get('http://127.0.0.1:8000/api/v1/analytics/dashboard');
                console.log('API响应:', response.data);
                document.getElementById('status').innerHTML = 'API连接成功！';
                
                // 显示KPI数据
                if (response.data && response.data.kpis) {
                    const kpiGrid = document.getElementById('kpi-grid');
                    kpiGrid.innerHTML = response.data.kpis.map(kpi => `
                        <div style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;" 
                             onclick="alert('点击了: ' + '${kpi.title}')">
                            <h3>${kpi.title}</h3>
                            <p>值: ${kpi.value}</p>
                            <p>变化: ${kpi.change}</p>
                        </div>
                    `).join('');
                }
            } catch (error) {
                console.error('API测试失败:', error);
                document.getElementById('status').innerHTML = 'API连接失败: ' + error.message;
            }
        }
        
        // 页面加载后测试
        window.addEventListener('DOMContentLoaded', testAPI);
    </script>
</body>
</html>